<template>
    <div class="full-screen-container min-h-screen bg-gray-50">
        <div class="flex h-screen">
            <!-- 左侧菜单 -->
            <div class="w-64 bg-[#2C3E50] text-white">
                <div class="flex items-center h-16 px-4">
                    <img src="https://ai-public.mastergo.com/ai/img_res/f5ee068fa13cf489fd924b8c87fbccc0.jpg" alt="logo"
                        class="w-8 h-8 mr-2" />
                    <span class="text-lg font-medium">人才画像后台管理系统</span>
                </div>
                <div class="px-2">
                    <template v-for="(item, index) in menuItems" :key="index">
                        <!-- 菜单项 -->
                        <div
                            class="flex items-center px-4 h-12 rounded-lg cursor-pointer mb-1 hover:bg-blue-500 transition-colors duration-200"
                            :class="{ 'bg-blue-600': item.active }"
                            @click="handleMenuClick(index)">
                            <el-icon class="mr-3">
                                <component :is="item.icon" />
                            </el-icon>
                            <span>{{ item.name }}</span>
                        </div>

                        <!-- 渲染子菜单，点击测评管理后才显示 -->
                        <div v-if="item.subMenu && item.active" class="pl-8">
                            <div v-for="(subItem, subIndex) in item.subMenu" :key="subIndex" 
                                class="flex items-center px-4 h-10 rounded-lg cursor-pointer mb-1 hover:bg-blue-400 transition-colors duration-200"
                                :class="{ 'bg-blue-500': subItem.active }"
                                @click="handleSubMenuClick(subItem, subIndex, index)">
                                <span>{{ subItem.name }}</span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <!-- 右侧内容 -->
            <div class="flex-1 flex flex-col overflow-hidden">
                <!-- 顶部导航 -->
                <div class="h-16 bg-white border-b flex items-center justify-between px-6">
                    <div class="flex items-center">
                        <el-icon class="text-lg cursor-pointer">
                            <Expand />
                        </el-icon>
                        <div class="ml-4 text-gray-500">
                            首页 / 系统管理 / 用户管理
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <el-icon class="text-lg cursor-pointer">
                            <Setting />
                        </el-icon>
                        <div class="w-8 h-8 rounded-full overflow-hidden">
                            <img src="https://ai-public.mastergo.com/ai/img_res/39fee51c8efb2bb5e8f19fac231e41c8.jpg"
                                alt="avatar" class="w-full h-full object-cover" />
                        </div>
                    </div>
                </div>
                <router-view></router-view>
            </div>

        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import {
    Search,
    Expand,
    Bell,
    FullScreen,
    Setting,
    HomeFilled,
    User,
    UserFilled,
    Lock,
    Document,
    List
} from '@element-plus/icons-vue';
import { useRouter } from "vue-router";

const router = useRouter()

// 菜单项数据
const menuItems = ref([
    { name: '首页', icon: 'HomeFilled', active: false, path: '/system/usermanage' },
    { name: '用户管理', icon: 'User', active: false, path: '/system/usermanage', subMenu: [
        { name: '学生管理', path: '/system/studentmanage', active: false },
        { name: '教师管理', path: '/system/teachermanage', active: false },
        { name: '招聘方管理', path: '/system/bossmanage', active: false },
        { name: '普通管理员管理', path: '/system/administratormanage', active: false }
    ] },
    { name: '角色管理', icon: 'UserFilled', active: false, path: '/system/rolemanage' },
    { name: '权限管理', icon: 'Lock', active: false, path: '/system/authmanage' },
    { name: '测评管理', icon: 'Document', active: false, path: '/system/topicmanage', subMenu: [
        { name: '题型管理', path: '/system/topictypemanage', active: false },
        { name: '题目管理', path: '/system/topicmanage', active: false }
    ] },
    { name: '岗位管理', icon: 'Briefcase', active: false, path: '/system/poststationmanage' },
    { name: '通知公告', icon: 'Bell', active: false, path: '/system/noticemanage' },
]);

// 处理菜单点击事件
const handleMenuClick = (index: number) => {
    const item = menuItems.value[index];

    // 清除所有其他菜单的 active 状态
    menuItems.value.forEach((menuItem, idx) => {
        if (idx !== index) {
            menuItem.active = false;
            // 关闭子菜单
            if (menuItem.subMenu) {
                menuItem.subMenu.forEach(subItem => subItem.active = false);
            }
        }
    });

    // 如果点击的是有子菜单的项，切换子菜单的显示与隐藏
    if (item.subMenu) {
        item.active = !item.active; // 切换active状态
    } else {
        // 没有子菜单的项，切换状态并跳转路由
        item.active = true;
        router.push(item.path);
    }
};

// 处理子菜单点击事件
const handleSubMenuClick = (subItem: any, subIndex: number, parentIndex: number) => {
    // 清除父菜单的 active 状态
    menuItems.value[parentIndex].subMenu.forEach(item => item.active = false);
    
    // 设置当前子菜单项的 active 状态
    subItem.active = true;

    // 跳转到相应的路由
    router.push(subItem.path);
};
</script>

<style scoped>
.el-input :deep(.el-input__wrapper) {
    border-radius: 4px;
    box-shadow: 0 0 0 1px #dcdfe6 inset;
}

.el-input :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #409eff inset;
}

.el-table :deep(.el-table__header) {
    background-color: #f5f7fa;
}

.el-pagination :deep(.el-pagination__sizes .el-input .el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-select .el-input .el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-date-editor .el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
}

/* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
.full-screen-container {
    width: 100vw;
    /* 浏览器窗口的宽度 */
    height: 100vh;
    /* 浏览器窗口的高度 */
    background-color: #ffffff;
    /* 可以选择合适的背景色 */
    margin: 0;
    /* 去除默认的外边距 */
    padding: 0;
    /* 去除默认的内边距 */
}

/* 如果有特定的样式应用于 .body，可以考虑调整 */
.body {
    width: 100%;
}
</style>
